iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

log Vue 一下系列 第 2

Vue一下 二日:選擇Vue與工具準備

  • 分享至 

  • xImage
  •  

六角選擇 Vue錄製教材的原因

語法直觀、學習曲線較平緩、雙向綁定。

語法直觀及學習曲線平緩對於一個自學入門前端者而言,我認為非常重要,不容易受挫、容易吸收對於自學者來說是很必要的,畢竟自己寫程式已經很孤獨了,甚至是害羞內向不善在線上請教的入門者而言~稍後再來談談雙向綁定

開發環境準備

大部分課程設計都會是開發環境介紹,這裡提到的在未付費的udemy課程頁上面也可以預覽,直接列出提到的項目,至於想知道這些功能個別是什麼,可以去課程預覽頁面觀看:
編輯器 VS code
編輯器擴充

  • Preview on Web Sever
  • vue
  • vue 2 snippets
  • vue-cli

同時如果有寫過bootstrap的人應該也會參考bs的官網(至少我自己是這樣,做案子時實在很想偷懶很趕就直接複製來改)寫vue當然也要參考vue官網,可自行切換中英文

接者是 Chrome的擴充 vue devtools
安裝後在網頁上元件點右鍵>檢查,看到Element Console …的那一列,最右邊有 Vue,點擊後左邊會有資料的樹狀圖,右邊會顯示資料可以逐一打開並暫時修改,這讓我們可以方便測試

而我自己是推薦開發者護眼必備 chrome dev tool darken
顧名思義讓 dev tool黑化不刺眼

回到vue官網中,介紹>起步有個範例 JSFiddle 上的 Hello World 例子,可以供我們自行參考(或腦補),我們可以在裡面看到起手式就是

new Vue()

範例內容擷取
(html)

<div id="app">
  <p>{{ message }}</p>
</div>

(javascript)

new Vue({
	el: '#app',
        data: {
            message: 'Hello Vue.js!'
  		}
})

這邊給 html中 div標籤一個 id,我們在寫 css時慣例是使用 class,而 id是留給程式端使用的,當然也是可以用 class,el: 裡面就改成 '.app',不過還是遵從慣例對於將來或他人在維護使用上會比較好。

雙向綁定

來談談雙向綁定,參閱這個網站
双向绑定- 廖雪峰的官方网站
单向绑定- 廖雪峰的官方网站
裡面對單向、雙向的解釋都很白話,主要差在 user能不能在 view時對 model操作,像是填表單的時候。綁定也稱作「繫結」,可以搜尋看看單向繫結、雙向繫結這兩個關鍵字。

最後再提一下官網的內容,光是介紹頁就有附上許多教學連結("在 Scrimba 上尝试这节课"字樣),渲染( {{}} )、判斷式(if)、on:click在這裡就已經有介紹,若要直接用官網做教材,應該也是很好的選擇,等影片讀完之後計畫把官網全面讀過,再來分享給各位囉~(不過要在30天內做到做好又做滿好困難欸,直接變明年主題嗎?)然後真的是很擔心不小心就侵權,請務必告知,會盡快修改!感恩感恩


上一篇
Vue一下 首日:簡介與適用對象
下一篇
Vue一下 三日:Vue與 jQuery,跟一些指令們
系列文
log Vue 一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言